{% extends 'layout/organba.html' %}
{% load static %}
{% block title %} 人员管理 {% endblock %}


{% block content %}




<!--表格 如果觉得宽度太宽可以设置with-->
<div class="container">
{% if guser_list == "没有人员" %}
    <h1>还没有人员加入！！去邀请加入吧</h1>
    <a class="btn btn-primary" href="{% url "web:organinvite" %}">去邀请-></a>
{% else %}
<h2>本单位加入的名单如下:</h2>

<table class="table table-hover table-hover table-condensed">
    <tr class="success ">
        <th>ID</th>
         <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>手机号</th>
        <th>部门</th>
        <th>管理项</th>
    </tr>


    {% for item in guser_list %}
    <tr class="">
        <td><a href="#" data-toggle="tooltip" data-placement="left" title="点击查看他/她的打卡信息">{{ item.job_id }}</a></td>
        <td>{{ item.username }}</td>


          {% if item.gender == 1 %}
         <td>男</td>
        {% else %}
        <td>女</td>
        {% endif %}

        <td>{{ item.age }}</td>
        <td>{{ item.mobile_phone }}</td>
        <td>{{ item.bumen }}</td>
        <td><span class="btn btn-warning col-md-5 btn-xs" data-toggle="modal" data-target="#myModal" onclick="shanchu(event)">删除</span></td>
    </tr>

    {% endfor %}
    </table>

    <ul class="pagination">
     {{ page_html|safe }}<!--会以字符串显示用safe修饰-->
</ul>


<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">×
				</button>
				<h4 class="modal-title" id="myModalLabel">
					是否删除?
				</h4>
			</div>
			<div class="modal-body">
                <form action="#" method="post" id="rem">
                     {% csrf_token %}
                    <div id="xxjjj">




                    </div>

             </form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default"
						data-dismiss="modal" id="gb">关闭
				</button>
				<button type="button" class="btn btn-primary" id="tj">
					提交更改
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->


{% endif %}

</div>

{% endblock %}

{% block js %}

<script>


var shanc;
$(function () { $("[data-toggle='tooltip']").tooltip(); }); //a标签提示的东西
function shanchu(e) {
    //1.获取数据，插入到模板
     ID=$(e.target).parent().prev().prev().prev().prev().prev().prev().text();
     username=$(e.target).parent().prev().prev().prev().prev().prev().text();
     mobile=$(e.target).parent().prev().prev().text();
    console.log(ID,username,mobile);
     $("#xxjjj").children().remove();
     $("#xxjjj").append("<div class='row'><div class='col-md-4 col-md-offset-2'>名字:"+username+"</div></div><div class='row'><div class='col-md-4 col-md-offset-2'>ID :"+ID+"</div></div>");
     $("#xxjjj").append("<input type='hidden' name='ID' value='"+ID+"'/><input type='hidden' name='mobile' value='"+mobile+"'/>");
    shanc=$(e.target).parent().parent();

}

$("#tj").click(function () {
     $.ajax({
                     url: "{% url 'web:organstaff' %}",
                     type: "POST",
                     data: $('#rem').serialize(), // 所有字段数据 + csrf token
                     dataType: "JSON",
                     success: function (res) {
                        if (res.status) {

                            shanc.remove();
                            $("#myModal").modal('hide');



                        } else {
                            $("span").remove();
                             $("#gb").before("<span id='span' class='btn btn-warning'>删除失败！</span>");

                        }
                    }
                })

})

 //$(function () { $('#myModal').modal('hide')});
</script>




{% endblock %}